<template>
  <div class="bigBox">
    <!-- 搜索 -->
    <div class="search">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="合作商搜索: ">
          <el-input v-model="Value" placeholder="请输入" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 主题内容 -->
    <el-card>
      <!-- 新增角色按钮 -->
      <el-row style="height: 60px">
        <el-button
          icon="el-icon-plus"
          size="small"
          type="primary"
          @click="add"
        >新增</el-button>
      </el-row>
      <!-- 表格 -->
      <el-table :data="roleList">
        <el-table-column
          label="序号"
          align="left"
          type="index"
          width="100"
        />
        <el-table-column
          label="合作商名称"
          align="left"
          width="220"
          prop="name"
        />
        <el-table-column
          label="账号"
          align="left"
          width="220"
          prop="account"
        />
        <el-table-column
          label="设备数量"
          align="left"
          width="220"
          prop="vmCount"
        />
        <el-table-column
          label="分成比例"
          align="left"
          width="220"
          prop="ratio"
        />
        <el-table-column
          label="联系人"
          align="left"
          width="220"
          prop="contact"
        />
        <el-table-column
          label="联系电话"
          align="left"
          width="220"
          prop="mobile"
        />
        <el-table-column label="操作" width="270" align="left">
          <template #default="{ row }">
            <!-- <template class="three"> -->
            <a style="color:blue" @click="reset(row)">重置密码</a>
            <a style="margin-left:18px;color:blue" @click="viewDetails(row)">查看详情</a>
            <a style="margin-left:18px;color:blue" @click="add(row)">修改</a>
            <a style="margin-left:18px;color:red" @click="del(row.id)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="bottom">
        <el-col :span="20">
          <div>共{{ areaList.totalCount }}条数据 第{{ areaList.pageIndex }}/{{ areaList.totalPage }}页</div>
        </el-col>
        <el-col :span="4">
          <el-button-group>
            <el-button type="warning" icon="el-icon-arrow-left" :disabled="upShow" @click="up">上一页</el-button>
            <el-button type="warning" style="margin-left:20px;" :disabled="underShow" @click="under">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </el-card>
    <!-- add新增的弹出框 -->
    <el-dialog
      title="新增合作商"
      :visible.sync="addShow"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="合作商名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入" maxlength="10" show-word-limit />
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="ruleForm.contact" placeholder="请输入" maxlength="10" show-word-limit />
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input v-model="ruleForm.mobile" placeholder="请输入" maxlength="11" show-word-limit />
        </el-form-item>
        <el-form-item label="分成比例(%)" prop="ratio">
          <template>
            <el-input-number v-model="ruleForm.ratio" placeholder="请输入" controls-position="right" :min="0" :max="100" @change="handleChange" />
          </template>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input v-model="ruleForm.account" placeholder="请输入" maxlength="18" show-word-limit />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入" maxlength="20" show-word-limit />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="addSure">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="合作商详情"
      :visible.sync="detailsShow"
      width="30%"
      :before-close="detailsShowFn"
    >
      <el-row>
        <el-col :span="12">合作商：{{ xiangXi.name }}</el-col>
        <el-col :span="12">联系人：{{ xiangXi.contact }}</el-col>
      </el-row>
      <el-row class="top">
        <el-col :span="12">联系电话：{{ xiangXi.mobile }}</el-col>
        <el-col :span="12">分成比例:{{ xiangXi.ratio }}%</el-col>
      </el-row>
    </el-dialog>
  </div>

</template>

<script>
// import cityData from '@/components/chengShi/index.js'
// import { domestic } from '@/components/city/index.js'
// import { regionData, CodeToText } from 'element-china-area-data'
import { deletePartner, Modifier, resetWord, addPartners, Partners, areaList } from '@/api'
export default {
  data() {
    return {
      row: {}, // 判断哪个点击的
      xiangXi: {},
      tableData: [], // 详细
      detailsShow: false, // 区域详情的关闭
      // 新增输入框的数据
      ruleForm: {
        name: '', // 	合作商名称
        account: '', // 	账号
        password: '', //	密码
        ratio: '', // 分成比例
        contact: '', // 联系人
        mobile: '' // 手机号
      },
      rules: {
        name: {
          required: true,
          message: '合作商名称不能为空',
          trigger: 'blur'
        },
        account: {
          required: true,
          message: '账号不能为空',
          trigger: 'blur'
        },
        password: {
          required: true,
          message: '密码不能为空',
          trigger: 'blur'
        },
        ratio: {
          required: true,
          message: '分成比例不能为空',
          trigger: 'blur'
        },
        contact: {
          required: true,
          message: '联系人不能为空',
          trigger: 'blur'
        },
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ]
      },
      loc: '',
      partnersList: [], // 合作商列表
      businessList: [], // 商圈
      addShow: false, // 控制添加窗口
      upShow: false, // 上下页的禁用状态
      underShow: false,
      Value: '', // 绑定输入框 点位搜索
      zoneValue: [], // 区域搜索
      roleList: [], // 渲染数据
      areaList: {}, // 全部数据
      condition: {
        0: '未投放', 1: '运营', 3: '撤机'
      }
    }
  },
  async created() {
    // this.options = cityData.cityData
    console.log(this.option)
    this.publicApi('', 1, 10)
    const res = await areaList({ pageIndex: 1, pageSize: 100000 })
    console.log(res)
    this.zoneValue = res.data.currentPageRecords
  },
  methods: {
    del(id) {
      // 删除
      this.$confirm('真的要删除吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // console.log(this.areaList)
        // 2. 调用接口
        await deletePartner(id)
        // 提示用户
        this.$message.success('删除成功')
        // 删除最后一页最后一条数据时，页数减 1
        if (this.areaList.currentPageRecords.length === 1 && this.areaList.pageIndex > 1) {
          this.areaList.pageIndex--
        }
        this.publicApi('', 1, 10)
      }).catch(error => {
        console.log(error)
      })
    },
    detailsShowFn() {
      // 产看详情的关闭方法
      this.detailsShow = false
    },
    // 重置密码
    reset(row) {
      this.$confirm('真的要重置吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 2. 调用接口
        await resetWord(row.id)
        // 提示用户
        this.$message.success('重置成功')
        this.publicApi('', 1, 10)
      }).catch(error => {
        this.$message.success('取消重置')
        console.log(error)
      })
    },
    // 查看详情
    async viewDetails(row) {
      this.detailsShow = true
      console.log(row)
      this.xiangXi = row
      // const { data } = await pointDetails(row.id)
      // this.tableData = data
      // console.log(this.tableData)
    },
    async addSure() {
      // 新增的确认提交
      this.$refs.ruleForm.validate(async(valid) => {
        if (!valid) return

        // console.log(this.ruleForm)
        if (this.row.name) {
          await Modifier(this.row.id, this.ruleForm)
          this.$message.success('修改成功')
          this.handleClose()
        }
        try {
          await addPartners(this.ruleForm)
          this.handleClose()
          this.$message.success('添加成功')
        } catch (error) {
          console.log(error)
          // this.$message.success(error)
        }
        this.publicApi('', 1, 10)
      })
    },
    handleChange() {
      // 计数器改变时触发
    },
    handleClose() {
      // 添加窗口的关闭方法
      this.addShow = false
      this.$refs.ruleForm.resetFields()
    },
    // 搜索部分
    onSubmit() {
      // 查询的按钮areaName
      this.publicApi(this.Value, '1', '10')
    },
    // 新增/修改的按钮
    async add(row) {
      console.log(row)
      this.row = row
      this.addShow = true
      if (row.name) {
        this.ruleForm.name = row.name
        this.ruleForm.account = row.account
        this.ruleForm.password = row.password
        this.ruleForm.ratio = row.ratio
        this.ruleForm.contact = row.contact
        this.ruleForm.mobile = row.mobile
      }
    },
    // 公共调用
    async publicApi(name, pageIndex, pageSize) {
      const { data } = await Partners({
        name: name,
        pageIndex: pageIndex,
        pageSize: pageSize
      })
      this.areaList = data

      if (data.pageIndex <= 1) {
        this.upShow = true
      } else {
        this.upShow = false
      }
      if (data.pageIndex === data.totalPage) {
        this.underShow = true
      } else {
        this.underShow = false
      }
      this.roleList = data.currentPageRecords
    },
    up() {
      // 上一页
      this.publicApi('', +this.areaList.pageIndex - 1, this.areaList.pageSize)
    },
    under() {
      // 下一页
      this.publicApi('', +this.areaList.pageIndex + 1, this.areaList.pageSize)
    }
  }
}
</script>
<style lang="scss" scoped>
.bigBox {
  padding: 20px;
  .search {
    background-color: #fff;
    padding: 10px;
    padding-bottom: 0px;
  }
}
.bottom {
  margin-top: 30px;
}
.top{
  margin-top: 30px;
}
</style>
